<template>
	<div style="width:800px">
		<el-button @click="clickBtn">点击显示table</el-button>
		<el-table v-if="isShow" :data="tableData" border row-key="id" align="left" @selection-change="selectInfo">
			<!-- <el-table-column
				v-for="(item, index) in col"
				:key="`col_${index}`"
				:prop="dropCol[index].prop"
				:label="item.label"
			></el-table-column> -->
			<el-table-column type="selection" width="80" />
			<el-table-column prop="date" label="Date" width="180" />
			<el-table-column prop="name" label="Name" width="180" />
			<el-table-column prop="address" label="Address" />
		</el-table>
		<pre style="text-align: left">
      {{ dropCol }}
    </pre>
		<hr />
		<pre style="text-align: left">
      {{ tableData }}
    </pre>
	</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
	name:'DragTable',
	data() {
		return {
			col: [
				{
					label: '日期',
					prop: 'date'
				},
				{
					label: '姓名',
					prop: 'name'
				},
				{
					label: '地址',
					prop: 'address'
				}
			],
			dropCol: [
				{
					label: '日期',
					prop: 'date'
				},
				{
					label: '姓名',
					prop: 'name'
				},
				{
					label: '地址',
					prop: 'address'
				}
			],
			tableData: [
				
			],
			isShow:false
		}
	},
	mounted() {
		
		setTimeout(() => {
			this.tableData = [
				{
					id: '1',
					date: '2016-05-02',
					name: '王小虎1',
					address: '上海市普陀区金沙江路 100 弄'
				},
				{
					id: '2',
					date: '2016-05-04',
					name: '王小虎2',
					address: '上海市普陀区金沙江路 200 弄'
				},
				{
					id: '3',
					date: '2016-05-01',
					name: '王小虎3',
					address: '上海市普陀区金沙江路 300 弄'
				},
				{
					id: '4',
					date: '2016-05-03',
					name: '王小虎4',
					address: '上海市普陀区金沙江路 400 弄'
				}
			]
		},2000)
	},
	methods: {
		//行拖拽
		rowDrop() {
			const tbody = document.querySelector('.el-table__body-wrapper tbody')
			// const _this = this
			console.log(tbody,'==tbody')
			Sortable.create(tbody, {
				onEnd({ newIndex, oldIndex }) {
					console.log( newIndex, oldIndex)
					// const currRow = _this.tableData.splice(oldIndex, 1)[0]
					// _this.tableData.splice(newIndex, 0, currRow)
				}
			})
		},
		//列拖拽
		columnDrop() {
			const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
			this.sortable = Sortable.create(wrapperTr, {
				animation: 180,
				delay: 0,
				onEnd: evt => {
					const oldItem = this.dropCol[evt.oldIndex]
					this.dropCol.splice(evt.oldIndex, 1)
					this.dropCol.splice(evt.newIndex, 0, oldItem)
				}
			})
		},
		clickBtn(){
			this.isShow = true
			this.$nextTick(() => {
				this.rowDrop()
				this.columnDrop()
			})
			
		},
		selectInfo(val){
			console.log(val,'==val')
		}
	}
}
</script>